<!--

	备份： 月薪制作和补发的那个页面
	备份原因：新开一个补发页面，原来页面的功能不动
	/rzqh-web/src/views/todo/salary/list.vue  月薪列表页面，可以选择补发或者月工资那个

-->
<template>
  <div>

    <!--
        描述：该页面是月薪制作的详情页面
      -->
    <div style="position: relative;">
      <div class="clearfix" style="margin-bottom: 10px;height: 85px;">
        <div style="float: left; height: 28px; line-height: 28px;">
          <span style="margin-left: 5px; margin-right: 10px;  color: #ff4949;">流程标题：

            <el-input
              v-model="paramsData.title"
              size="small"
              :placeholder="`请输入流程标题`"
              style="width: 240px;"
              @input="changeTitle($event)"
            />

          </span>
          <span style="color: #409EFF;">部门：{{ deptName }}</span>
          <span style="margin-left: 15px; color: #67C23A;">月份：{{ salaryDate }}</span>
          <span style="margin-left: 15px; color: #222;">人数：{{ currentListData.length }}</span>
        </div>
        <div style="float: right;margin-top: 0;">
          <el-button
            type="success"
            size="mini"
            @click="goBack"
          >返回
          </el-button>
          <el-popover
            class="cyui-popover"
            placement="bottom-end"
            width="200"
            trigger="click"
            style="display: inline-block; margin: 0 10px;"
          >
            <el-button
              slot="reference"
              type="success"
              size="mini"
              plain
            >表头
            </el-button>
            <el-checkbox
              v-model="allColumnSelected"
              :indeterminate="allColumnSelectedIndeterminate"
              @change="handleCheckedAllTableColumn"
            >
              全选
            </el-checkbox>
            <el-checkbox
              v-for="item in tableColumnList"
              :key="item.label"
              v-model="item.visible"
              @change="handleCheckedTableColumn(item)"
            >
              {{ item.label }}
            </el-checkbox>
          </el-popover>
          <!-- <el-button
             type="info"
             size="mini"
             @click="handleReelect"
             v-if="type==='1'"
           >重选
           </el-button>-->
          <!-- <el-button
             type="info"
             size="mini"
             @click="handleRedo"
             v-if="type==='2'"
             v-hasPermi="['hr:salaryMonth:make:add']"
           >重做
           </el-button>-->

          <el-button
            v-if="paramsData.salaryType==20"
            type="primary"
            size="mini"
            @click="handlebufa"
          >选择员工
          </el-button>

          <div id="import-box" style="display: inline-block; margin: 0 10px;">
            <el-button
              v-if="type!=='3'"
              id="upload-import"
              size="mini"
              type="primary"
              plain
              @click="handleImport"
            >导入
            </el-button>
          </div>
          <el-button
            v-if="type!=='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            size="mini"
            type="warning"
            plain
            @click="handleExport"
          >导出
          </el-button>
          <el-button
            v-if="type!=='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            type="primary"
            size="mini"
            @click="handleSave"
          >保存
          </el-button>
          <el-button
            v-if="type!=='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            type="warning"
            size="mini"
            @click="handleApprove()"
          >提交
          </el-button>
        </div>
      </div>
    </div>
    <template>
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="listLoading"
        class="list-table"
        :data="currentListData"
        stripe
        size="small"
        fit
        highlight-current-row
        show-summary
        :summary-method="handleSummaries"
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <!--<el-table-column type="selection" align="center" width="55"/>-->
        <!-- <el-table-column fixed="left" v-if="columnsVisible('salaryDate')" :show-overflow-tooltip="true"
                         prop="salaryDate"
                         label="工资年月">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">工资年月</p>
          </template>
          <template slot-scope="scope">
            <span>{{salaryDate | formatDate('yyyy-MM') }}</span>
          </template>
        </el-table-column> -->
        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="employeeName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">姓名</p>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('certNo')"
          :show-overflow-tooltip="true"
          prop="certNo"
          label="身份证号"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">身份证号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.certNo }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('phone')"
          :show-overflow-tooltip="true"
          prop="phone"
          label="电话号码"
          width="100"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">电话号码</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('deptName')"
          :show-overflow-tooltip="true"
          prop="deptName"
          width="150"
          label="部门名称"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">部门名称</p>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('status')" :show-overflow-tooltip="true" prop="status" label="员工状态">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">员工状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.employeeStatus | employeeStatus" size="small">{{ scope.row.employeeStatus |
              employeeStatus('text') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('postName')" :show-overflow-tooltip="true" prop="postName" label="岗位/职务">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位/职务</p>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('onboardingDate')"
          :show-overflow-tooltip="true"
          prop="onboardingDate"
          label="入职日期"
          width="100"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">入职日期</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.onboardingDate | formatDate('yyyy-MM-dd') | formatDefaultDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('leaveDate')"
          :show-overflow-tooltip="true"
          prop="leaveDate"
          label="离职日期"
          width="100"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">离职日期</p>
          </template>
          <template slot-scope="scope">
            <span>
              {{ scope.row.leaveDate | formatDate('yyyy-MM-dd') | formatDefaultDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-if="paramsData.salaryType==10" :show-overflow-tooltip="true" prop="baseSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">基本工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.baseSalary"
                class="edit-input"
                size="small"
                :placeholder="`最大${scope.row.salaryBase}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'baseSalary')"
              />
            </template>
            <span v-else>{{ scope.row.baseSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="assessmentSalary"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">绩效奖金(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.assessmentSalary"
                class="edit-input"
                size="small"
                :placeholder="`最大${scope.row.salaryAssessment}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'assessmentSalary')"
              />
            </template>
            <span v-else>{{ scope.row.assessmentSalary }}</span>
          </template>
        </el-table-column>

        <el-table-column v-if="paramsData.salaryType==10" :show-overflow-tooltip="true" prop="postSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.postSalary"
                class="edit-input"
                size="small"
                :placeholder="`最大${scope.row.salaryPost}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'postSalary')"
              />
            </template>
            <span v-else>{{ scope.row.postSalary }}</span>
          </template>
        </el-table-column>
        <!--  <el-table-column :show-overflow-tooltip="true" prop="marketingSalary" width="170">-->

        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="marketingSalary"
          width="170"
        >

          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">营销奖金(行方)(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.marketingSalary"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'marketingSalary')"
              />
            </template>
            <span v-else>{{ scope.row.marketingSalary }}</span>
          </template>
        </el-table-column>

        <el-table-column v-if="paramsData.salaryType==10" :show-overflow-tooltip="true" prop="subsidySalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补贴工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.subsidySalary"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'subsidySalary')"
              />
            </template>
            <span v-else>{{ scope.row.subsidySalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="overtimeSalary"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">加班工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.overtimeSalary"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'overtimeSalary')"
              />
            </template>
            <span v-else>{{ scope.row.overtimeSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="reissueSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补发项(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.reissueSalary" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'reissueSalary')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.reissueSalary }}</span>
          </template>
        </el-table-column>-->
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="attendanceDeduction"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">考勤扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.attendanceDeduction"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'attendanceDeduction')"
              />
            </template>
            <span v-else>{{ scope.row.attendanceDeduction }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="businessDays" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">出差天数</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.businessDays" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'businessDays')"
                        style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.businessDays }}</span>
          </template>
        </el-table-column>-->
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="allowanceSalary"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">津贴(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.allowanceSalary"
                class="edit-input"
                size="small"
                :placeholder="`最大${scope.row.salaryAllowance}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'salaryAllowance')"
              />
            </template>
            <span v-else>{{ scope.row.allowanceSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="teacherMealSalary"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">讲师餐补(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.teacherMealSalary"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'teacherMealSalary')"
              />
            </template>
            <span v-else>{{ scope.row.teacherMealSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="labourServiceSalary"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.labourServiceSalary"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'labourServiceSalary')"
              />
            </template>
            <span v-else>{{ scope.row.labourServiceSalary }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :show-overflow-tooltip="true" prop="personnelManagementDept" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">人事管理部(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.personnelManagementDept" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'personnelManagementDept')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.personnelManagementDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="marketInnovationDept" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">市场创新部(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.marketInnovationDept" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'marketInnovationDept')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.marketInnovationDept }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="officialWebsite" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">官网(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.officialWebsite" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'officialWebsite')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.officialWebsite }}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column :show-overflow-tooltip="true" prop="substituteDeduction" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">代发代付(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input v-model="scope.row.substituteDeduction" class="edit-input" size="small"
                        @blur="handleChangeInputValue(scope, 'substituteDeduction')" style="width: 130px;"/>
            </template>
            <span v-else>{{ scope.row.substituteDeduction }}</span>
          </template>
        </el-table-column>-->
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="otherDeduction"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.otherDeduction"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'otherDeduction')"
              />
            </template>
            <span v-else>{{ scope.row.otherDeduction }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="paramsData.salaryType==10" :show-overflow-tooltip="true" prop="payableSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应发工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.payableSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'payableSalary')"
              />
            </template>
            <span v-else>{{ scope.row.payableSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="personalSocialSecurityTotalCost"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalSocialSecurityTotalCost"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalSocialSecurityTotalCost')"
              />
            </template>
            <span v-else>{{ scope.row.personalSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="personalSocialSecurityAdjust"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保总扣除调整(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalSocialSecurityAdjust"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalSocialSecurityAdjust')"
              />
            </template>
            <span v-else>{{ scope.row.personalSocialSecurityAdjust }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="enterpriseSocialSecurityTotalCost"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">企业社保总扣除(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.enterpriseSocialSecurityTotalCost"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'enterpriseSocialSecurityTotalCost')"
              />
            </template>
            <span v-else>{{ scope.row.enterpriseSocialSecurityTotalCost }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="securityCharge"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">服务费(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.securityCharge"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'securityCharge')"
              />
            </template>
            <span v-else>{{ scope.row.securityCharge }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('beforeTaxSalary')"
          :show-overflow-tooltip="true"
          prop="beforeTaxSalary"
          label="税前工资"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">税前工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.beforeTaxSalary"
                class="edit-input"
                size="small"
                :disabled="paramsData.salaryType==10"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'beforeTaxSalary')"
              />
            </template>
            <span v-else>{{ scope.row.beforeTaxSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('personalIncomeTax')"
          :show-overflow-tooltip="true"
          prop="personalIncomeTax"
          label="个税"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个税(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalIncomeTax"
                class="edit-input"
                size="small"
                :disabled="paramsData.salaryType==10"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalIncomeTax')"
              />
            </template>
            <span v-else>{{ scope.row.personalIncomeTax }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="paramsData.salaryType==10"
          :show-overflow-tooltip="true"
          prop="labourServiceTax"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">劳务税(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.labourServiceTax"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'labourServiceTax')"
              />
            </template>
            <span v-else>{{ scope.row.labourServiceTax }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('remark')"
          :show-overflow-tooltip="true"
          prop="remark"
          label="备注"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">备注</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.remark"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'remark')"
              />
            </template>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="columnsVisible('bankNo')" :show-overflow-tooltip="true" prop="bankNo" label="银行卡号"
                         width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">银行卡号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.bankNo }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('openingBank')" :show-overflow-tooltip="true" prop="openingBank"
                         label="开户行" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">开户行</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.openingBank }}</span>
          </template>
        </el-table-column> -->

        <el-table-column fixed="right" :show-overflow-tooltip="true" prop="realSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实发工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.realSalary"
                class="edit-input"
                size="small"
                :disabled="paramsData.salaryType==10"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'realSalary')"
              />
            </template>
            <span v-else>{{ scope.row.realSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="80"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            />

          </template>
        </el-table-column>

      </el-table>

    </template>
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="searchKey.pageNum"
        :page-sizes="[10, 15, 20]"
        :page-size="searchKey.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import { debounce } from 'lodash'
import { create, all } from 'mathjs'
import numeral from 'numeral'
import commonMixins from '@/mixins/common'
import salaryMixins from '@/mixins/salary'
import filters from '@/filters/filters'
import tagFilter from '@/filters/tagFilter'

const math = create(all, {
  number: 'BigNumber',
  precision: 64
})

export default {
  name: 'SalarymakeTable',
  components: {},
  mixins: [commonMixins, salaryMixins, filters, tagFilter],
  props: {
    data: { // 列表数据（父页面传过来的）
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    searchParams: { // 搜索参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    totalCount: {
      type: [String, Number],
      required: true,
      default: 0
    },
    listLoading: {
      type: [Boolean],
      required: true,
      default: false
    },
    type: {
      type: [String],
      required: true,
      default: '1'
    },
    deptName: {
      type: [String],
      default: '-'
    },
    salaryDate: {
      type: [String],
      default: '-'
    },
    paramsData: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      firstInit: true,
      searchKey: {},
      isExpand: true,
      tableSelectedData: [], // 选中的表数据
      listData: [] // 列表数据
    }
  },
  computed: {
    currentListData() { // 当前的数据列表
      console.log('计算！')
      const { listData, totalCount } = this
      console.log('totalCount', totalCount)
      const { pageNum, pageSize } = this.searchKey
      console.log('searchKey', this.searchKey)
      let totalPage = 0 // 总页数
      if ((totalCount / pageSize) > parseInt(totalCount / pageSize)) {
        totalPage = parseInt(totalCount / pageSize) + 1
      } else {
        totalPage = parseInt(totalCount / pageSize)
      }

      // 对数据进行分页
      const startRow = (pageNum - 1) * pageSize
      const endRow = (pageNum * pageSize > totalCount ? totalCount : pageNum * pageSize) - 1
      const list = listData.filter((item, index) => {
        return startRow <= index && index <= endRow
      })

      return list
    }
  },
  methods: {

    goBack() {
      let name = 'Salary'

      if (this.$route.query.task) {
        name = 'Task'
      }
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace({
        name: name
      })
    },
    computedPayableSalary(row) { // 计算应发工资
      // 基本工资 + 绩效奖金 + 岗位工资 + 营销奖金（行方）+ 补贴工资 + 加班工资 - 考勤扣款 + 津贴 + 讲师餐补 + 劳务工资 - 其他扣款
      let { baseSalary, assessmentSalary, postSalary, marketingSalary, subsidySalary, overtimeSalary, attendanceDeduction, allowanceSalary, teacherMealSalary, labourServiceSalary, otherDeduction } = row

      // 基本工资 + 绩效奖金 + 营销奖金（行方）+ 补贴工资 + 加班工资 - 考勤扣款 + 津贴 + 讲师餐补 + 劳务工资 - 其他扣款
      // let { baseSalary, assessmentSalary, marketingSalary, subsidySalary, overtimeSalary, attendanceDeduction, allowanceSalary, teacherMealSalary, labourServiceSalary, otherDeduction } = row

      baseSalary = baseSalary || 0
      assessmentSalary = assessmentSalary || 0
      postSalary = postSalary || 0
      marketingSalary = marketingSalary || 0
      subsidySalary = subsidySalary || 0
      overtimeSalary = overtimeSalary || 0
      attendanceDeduction = attendanceDeduction || 0
      allowanceSalary = allowanceSalary || 0
      teacherMealSalary = teacherMealSalary || 0
      labourServiceSalary = labourServiceSalary || 0
      otherDeduction = otherDeduction || 0

      const formula = `${baseSalary} + ${assessmentSalary} + ${postSalary} + ${marketingSalary} + ${subsidySalary} + ${overtimeSalary} - ${attendanceDeduction} + ${allowanceSalary} + ${teacherMealSalary} + ${labourServiceSalary} - ${otherDeduction}`
      return this.formatNumber({ formula })
    },
    computedBeforeTaxSalary(row, payableSalary) { // 计算税前工资
      let { personalSocialSecurityTotalCost, personalSocialSecurityAdjust } = row
      personalSocialSecurityTotalCost = personalSocialSecurityTotalCost || 0
      personalSocialSecurityAdjust = personalSocialSecurityAdjust || 0

      const formula = `${payableSalary} - ${personalSocialSecurityTotalCost} - ${personalSocialSecurityAdjust}`
      return this.formatNumber({ formula })
    },
    /**
       * 计算个人所得税
       * @param beforeTaxSalary 税前工资 - 劳务工资 - 5000
       * @returns {number}
       */
    computedPersonalIncomeTax(row, beforeTaxSalary) {
      let { labourServiceSalary } = row
      labourServiceSalary = labourServiceSalary || 0
      let cTax = math.evaluate(`${beforeTaxSalary} - ${labourServiceSalary} - 5000`)
      cTax = cTax < 0 ? 0 : cTax
      if (cTax <= 3000) {
        cTax = `${cTax} * 0.03`
      } else if (cTax > 3000 && cTax <= 12000) {
        cTax = `${cTax} * 0.10 - 210`
      } else if (cTax > 12000 && cTax <= 25000) {
        cTax = `${cTax} * 0.20 - 1410`
      } else if (cTax > 25000 && cTax <= 35000) {
        cTax = `${cTax} * 0.25 - 2660`
      } else if (cTax > 35000 && cTax <= 55000) {
        cTax = `${cTax} * 0.30 - 4410`
      } else if (cTax > 55000 && cTax <= 80000) {
        cTax = `${cTax} * 0.35 - 7160`
      } else {
        cTax = `${cTax} * 0.45 - 15160`
      }
      return this.formatNumber({ formula: cTax })
    },
    /**
       * 劳务报酬所得，每次收入不超过四千元的，减除费用八百元；四千元以上的，减除百分之二十的费用，其余
       * 额为应纳税所得额。然后适用比例税率，税率为百分之二十。
       *
       * |收入(x)         |应纳税部分(y)     |   阶梯         |税率        | 纳税额           | 速扣系数     |
       * -----------------------------------------------------------------------------------------------
       * |x<=800         |      0       |     0             |  0        | 0               | 0           |
       * |800<x<=4000    |    x-800     |    y<=20000       |  20%      | (x-800)*20%     | 0           |
       * |4000<x<=20000  |    0.8x      |    y<=20000       |  20%      | 0.8x*20%        | 0           |
       * |20000<x<=50000 |    0.8x      |    20000<y<=50000 |  30%      | 0.8x*30%        | 2000        |
       * |x>50000        |    0.8x      |    y>50000        |  40%      | 0.8x*40%        | 7000        |
       *
       * @param originIncome
       * @returns {number}
       */
    computedIncomeAfterTax(originIncome) {
      // 应纳税部分
      let taxIncome = 0 // 应纳税部分
      let taxRate = 0 // 税率
      let quickDeducData = 0 // 速扣系数
      if (originIncome <= 800) {
        return originIncome
      } else if (originIncome > 800 && originIncome <= 4000) {
        taxIncome = math.evaluate(`${originIncome} - 800`)
        taxRate = 0.2
      }
      if (originIncome > 4000) {
        taxIncome = math.evaluate(`${originIncome} * 0.8`)
      }
      if (taxIncome <= 20000) {
        taxRate = 0.2
      } else if (taxIncome > 20000 && taxIncome <= 50000) {
        taxRate = 0.3
        quickDeducData = 2000
      }
      if (taxIncome > 50000) {
        taxRate = 0.4
        quickDeducData = 7000
      }
      const incomeAfterTax = `${originIncome} - (${taxIncome} * ${taxRate} - ${quickDeducData})`
      return this.formatNumber({ formula: incomeAfterTax })
    },
    /**
       * 计算劳务税 = 劳务工资 - 劳务税后工资
       * @param originIncome
       * @returns {number}
       */
    computedLabourServiceTax(row) {
      const { labourServiceSalary } = row
      const incomeAfterTax = this.computedIncomeAfterTax(labourServiceSalary)
      const labourServiceTax = `${labourServiceSalary} - ${incomeAfterTax}`
      return this.formatNumber({ formula: labourServiceTax })
    },
    /**
       * 实发工资 = 税前工资 - 个税 - 劳务税
       * @param beforeTaxSalary
       * @param personalIncomeTax
       * @param labourServiceTax
       * @returns {*}
       */
    computedRealSalary(beforeTaxSalary, personalIncomeTax, labourServiceTax) {
      const formula = `${beforeTaxSalary} - ${personalIncomeTax} - ${labourServiceTax}`
      return this.formatNumber({ formula })
    },
    handleSizeChange(val) { // 分页改变每页条数
      this.searchKey.pageSize = val
      // this.$emit('on-init', this.searchKey)
    },
    handleCurrentChange(val) { // 分页切换分页
      this.searchKey.pageNum = val
      // this.$emit('on-init', this.searchKey)
    },
    handleSelectionChange(selection) { // 多选框选中数据
      this.tableSelectedData = selection
    },
    handleExpand: debounce(function() { // 查询，防抖
      this.isExpand = !this.isExpand
      this.$emit('on-init', this.searchKey)
    }, 300),
    handleReelect() { // 重选选择
      this.$emit('on-reelect')
    },
    handleRedo() { // 重做
      this.$emit('on-redo')
    },
    handlebufa() {
      this.$emit('on-bufa')
    },
    handleSave: debounce(function() { // 保存，防抖
      this.$emit('on-save', this.listData)
    }, 300),
    handleApprove() { // 是否审批
      this.$emit('on-approve', this.listData)
    },
    handleExport: debounce(function() { // 导出，防抖
      this.$emit('on-export')
    }, 300),
    handleImport() { // 导入
      /* let { type } = this
        if (type === '1') {
          this.$notify.error({
            title: '错误',
            message: '请先保存数据！'
          })
        }*/
      // this.$emit('on-import');

    },

    changeTitle(e) {
      // console.log(e)
      this.$forceUpdate() // 我也不明白为什么，就是无法输入，只能这样了
    },

    // 输入框值变化事件
    handleChangeInputValue(data, key) {
      const isCurrency = /^(([1-9]\d*)|0)(\.\d{1,2})?$/
      const { pageNum, pageSize } = this.searchKey
      const { row } = data
      if (key !== 'remark' && !isCurrency.test(row[key])) {
        const value = numeral(row[key])
        // let value = parseFloat(row[key]) || 0
        row[key] = value.format('0.00')
      }
      const listDataIndex = (pageNum - 1) * pageSize + data.$index
      /* Object.keys(row).forEach((item, index) => {
          this.$set(this.listData[listDataIndex], item, row[item])
        }) */
      /* <<<<<<< Updated upstream
                let payableSalary = this.computedPayableSalary(row)
                let beforeTaxSalary = this.computedBeforeTaxSalary(row, payableSalary)
                let personalIncomeTax = this.computedPersonalIncomeTax(row, beforeTaxSalary) // 个税
                let labourServiceTax = this.computedLabourServiceTax(row) // 劳务税
                let realSalary = this.computedRealSalary(beforeTaxSalary, personalIncomeTax, labourServiceTax) // 实发工资
        =======*/

      let payableSalary = 0
      let beforeTaxSalary = 0
      let personalIncomeTax = 0
      let realSalary = 0

      const labourServiceTax = this.computedLabourServiceTax(row) // 劳务税

      if (this.paramsData.salaryType == 10) {
        payableSalary = this.computedPayableSalary(row)
        beforeTaxSalary = this.computedBeforeTaxSalary(row, payableSalary)
        personalIncomeTax = this.computedPersonalIncomeTax(beforeTaxSalary)
        realSalary = this.computedRealSalary(beforeTaxSalary, personalIncomeTax)
      } else {
        payableSalary = row.payableSalary
        beforeTaxSalary = row.beforeTaxSalary
        personalIncomeTax = row.personalIncomeTax
        realSalary = row.realSalary
      }

      this.$set(this.listData[listDataIndex], key, row[key])
      this.$set(this.listData[listDataIndex], 'payableSalary', payableSalary)
      this.$set(this.listData[listDataIndex], 'beforeTaxSalary', beforeTaxSalary)
      this.$set(this.listData[listDataIndex], 'personalIncomeTax', personalIncomeTax)
      this.$set(this.listData[listDataIndex], 'labourServiceTax', labourServiceTax)
      this.$set(this.listData[listDataIndex], 'realSalary', realSalary)
    },

    handleDelete(row) {
      this.$emit('on-delete', row.id)
    }
  },
  watch: {
    // 监听父页面传过来的列表数据
    data: {
      handler: function(newVal, oldVal) {
        console.log('父页面来的列表')
        console.log(newVal)
        if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
          console.log('listdata发生改变')
          this.listData = JSON.parse(JSON.stringify(newVal))
          this.totalCount = this.listData.length
          console.log(this.listData)
        }
      },
      deep: true,
      immediate: true
    },
    searchParams: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
          this.searchKey = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    }

    /* paramsData: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
            console.log('路由过来的参数为');
    				console.log(newVal);

    				//如果是补发工资，原有列表需要做特殊处理
    				if(newVal.salaryType == 1){
    					this.listData = [];
    				}
          }
        },
        deep: true,
        immediate: true
      },*/

  },
  created() {

    /**/

  },
  mounted() {
    this.getTableColumns()
  }
}
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>

<style lang="scss">
  .el-popover {
    max-height: 400px;
    overflow-x: auto;
    overflow-y: scroll;
  }
</style>
